<template>
  <page-wrap back hideSafeArea title="人脸验证" navLeft hideTab :showTop="true" txtColor='#000' bgColor="#fff"
    ref="pageWrap">
    <view class="page-content">
      <view class="containerV">
        <view class="headerV">
          <view class="top-tips1">
            <view>请将正对手机，头部匹配摄像区域</view>
          </view>
          <view class="top-tips2">
            为了便于识别认证，请拍摄本人头像
          </view>
        </view>
        <view class="contentV">
          <view class="mark"></view>
          <image v-if="tempImg" mode="widthFix" :src="tempImg" />
          <camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera" flash="off"
            resolution='high' />
          <view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
        </view>
        <view class="footerV">
          <view style="width: 100%;">
            <view v-if="!tempImg" style="width: 100%;">
              <view class="privacyV">
                <!-- <view class="icon"></view> -->
                <view class="text">
                  照片隐私<text @click="handleJumpSecurityClick">安全保障</text>中…
                </view>
              </view>
              <view class="bottom-tips-2">该照片仅作为你认证的凭证</view>
              <view class="take-photo-bgV">
                <!-- 图片上传   -->
                <view v-show="false" class="btn-change-upload" @click="handleChooseImage">上传</view>
                <!--拍照-->
                <div class="btn-take-photoOuter">
                  <view class="btn-take-photo" @click="handleTakePhotoClick"></view>
                </div>
                <!-- 切换镜头 -->
                <!-- <view class="btn-change-camera" @click="handleChangeCameraClick">切镜头</view> -->
              </view>
            </view>
            <view class="confirmV" v-else>
              <u-button class="btn-cancel" :ripple="true" @click="handleCancelClick">
                取消
              </u-button>
              <u-button class="btn-ok" :ripple="true" :loading="loading" type="primary" @click="handleOkClick">
                确定
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { dealFaceAuth, dealYltFaceAuth } from "@/api/modules/yw";
export default {
  name: "faceAudit",
  data() {
    return {
      tipsText: "", // 错误文案提示
      tempImg: "", // 本地图片路径
      cameraEngine: null, // 相机引擎
      devicePosition: true, // 摄像头朝向
      isAuthCamera: true, // 是否拥有相机权限
      condition: null,
      loading: false,
      certNo: "",
      certName: "",
      personId: "",
    };
  },

  onLoad(options) {
    if (options.q) {
      let paramStr = decodeURIComponent(options.q).split("?");
      this.optionUrl = decodeURIComponent(options.q);
      let resObj = {};
      if (paramStr[1]) {
        paramStr[1].split("&") &&
          paramStr[1].split("&").forEach((item) => {
            resObj[item.split("=")[0]] = item.split("=")[1];
          });
      }
      if (resObj.hasOwnProperty("condition")) {
        //业问的
        this.condition = resObj.condition;
      } else {
        //一览通
        this.certNo = resObj.certNo;
        this.certName = resObj.certName;
        this.personId = resObj.personId;
        console.log("certNo", this.certNo);
        console.log("certName", this.certName);
        console.log("personId", this.personId);
      }
    }
    this.initData();
  },
  mounted() {},
  methods: {
    // 初始化相机引擎
    initData() {
      // #ifdef MP-WEIXIN
      // 1、初始化人脸识别
      wx.initFaceDetect();
      // 2、创建 camera 上下文 CameraContext 对象
      this.cameraEngine = wx.createCameraContext();
      // 3、获取 Camera 实时帧数据
      const listener = this.cameraEngine.onCameraFrame((frame) => {
        if (this.tempImg) {
          return;
        }
        // 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
        wx.faceDetect({
          frameBuffer: frame.data,
          width: frame.width,
          height: frame.height,
          enablePoint: true,
          enableConf: true,
          enableAngle: true,
          enableMultiFace: true,
          success: (faceData) => {
            let face = faceData.faceInfo[0];
            if (faceData.x == -1 || faceData.y == -1) {
              this.tipsText = "检测不到人";
            }
            if (faceData.faceInfo.length > 1) {
              this.tipsText = "请保证只有一个人";
            } else {
              const { pitch, roll, yaw } = face.angleArray;
              const standard = 0.5;
              if (
                Math.abs(pitch) >= standard ||
                Math.abs(roll) >= standard ||
                Math.abs(yaw) >= standard
              ) {
                this.tipsText = "请平视摄像头";
              } else if (
                face.confArray.global <= 0.8 ||
                face.confArray.leftEye <= 0.8 ||
                face.confArray.mouth <= 0.8 ||
                face.confArray.nose <= 0.8 ||
                face.confArray.rightEye <= 0.8
              ) {
                this.tipsText = "请勿遮挡五官";
              } else {
                this.tipsText = "请拍照";
                // 这里可以写自己的逻辑了
              }
            }
          },
          fail: (err) => {
            if (err.x == -1 || err.y == -1) {
              this.tipsText = "检测不到人";
            } else {
              this.tipsText = err.errMsg || "网络错误，请退出页面重试";
            }
          },
        });
      });
      // 5、开始监听帧数据
      listener.start();
      // #endif
    },
    // 切换设备镜头
    handleChangeCameraClick() {
      this.devicePosition = !this.devicePosition;
    },
    // 图片上传
    handleChooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          console.log(res, "打印res，哈哈哈哈哈");
          if (res.errMsg === "chooseImage:ok") {
            uni.showLoading({
              title: "照片上传中...",
            });
            const tempFilePaths = res.tempFilePaths[0];
            this.upLoad(res.tempFilePaths);
          }
        },
        fail: (res) => {},
      });
    },
    // 拍照点击
    handleTakePhotoClick() {
      if (this.tipsText != "" && this.tipsText != "请拍照") {
        return;
      }
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting["scope.camera"]) {
            this.isAuthCamera = false;
            uni.openSetting({
              success: (res) => {
                if (res.authSetting["scope.camera"]) {
                  this.isAuthCamera = true;
                }
              },
            });
          }
        },
      });
      this.cameraEngine.takePhoto({
        quality: "high",
        success: ({ tempImagePath }) => {
          this.tempImg = tempImagePath;
        },
      });
    },
    // 点击确定上传
    handleOkClick() {
      //  这里的 this.tempImg 是经过人脸检测后  拍照拿到的路径
      this.upLoadOne(this.tempImg);
      uni.navigateBack({
        delta: 1,
      });
    },
    upLoad(tempFilePaths) {
      // #  注意  这里上传图片拿到的tempFilePaths是一个数组啊
      // 图片上传
      uni.showLoading({
        title: "上传中，请稍后...",
      });
      let proAll = [];
      tempFilePaths.forEach((item) => {
        console.log(item, "打印item");
        proAll.push(this.upLoadOne(item));
      });
      Promise.all(proAll).then((res) => {
        // 上传完成
        uni.hideLoading();
      });
    },
    upLoadOne(imgPath) {
      //  然后这里imgPath 传过来的是 要上传的临时本地图片的路径
      //  具体上传方法根据自己的请求方式   请求自己的接口

      this.loading = true;
      wx.uploadFile({
        url: "https://upload.yl1001.com/upload/images/save", //仅为示例，非真实的接口地址
        filePath: imgPath,
        name: "file",
        formData: {},
        success: (res) => {
          const data = JSON.parse(res.data);
          //发送给后端进行确认
          const params = {
            url: data.data[0],
          };
          if (this.condition) {
            params.condition = this.condition;
            this.sendYeWenFaceAudit(params);
          } else {
            params.certNo = this.certNo;
            params.certName = this.certName;
            params.personId = this.personId;
            this.sendYLTFaceAudit(params);
          }
        },
        fail: () => {
          this.loading = false;
        },
      });
    },
    sendYeWenFaceAudit(params) {
      console.log("params", params);
      dealFaceAuth(params)
        .then((faceRes) => {
          console.log("faceRes", faceRes);
          if (faceRes.code == 200) {
            uni.showModal({
              title: "提示",
              content: "人脸验证通过！请返回学习",
              showCancel: false,
              success: (res) => {
                if (res.confirm) {
                  wx.exitMiniProgram();
                }
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: faceRes.status_desc || "人脸验证失败，请重试",
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sendYLTFaceAudit(params) {
      console.log("params", params);
      dealYltFaceAuth(params)
        .then((faceRes) => {
          console.log("faceRes", faceRes);
          if (faceRes.code == 200) {
            uni.showModal({
              title: "提示",
              content: "人脸验证通过！请返回学习",
              showCancel: false,
              success: (res) => {
                if (res.confirm) {
                  wx.exitMiniProgram();
                }
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: faceRes.status_desc || "人脸验证失败，请重试",
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 点击 - 取消上传
    handleCancelClick() {
      this.tempImg = "";
    },
    // 点击 - 人脸安全保障按钮
    handleJumpSecurityClick() {
      uni.showToast({
        icon: "none",
        title: "假装跳转人脸安全保障",
        duration: 2000,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .containerV {
    width: 100%;
    height: 100%;
    .headerV {
      .top-tips1 {
        margin-top: 60rpx;
        color: #1c1c1c;
        font-size: 36rpx;
        text-align: center;
      }
      .top-tips2 {
        margin-top: 20rpx;
        color: #00aaff;
        font-size: 28rpx;
        text-align: center;
      }
    }
    .contentV {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 661rpx;
      margin-top: 30rpx;
      .tipV {
        bottom: 30rpx;
        position: absolute;
        line-height: 90rpx;
        padding-left: 24rpx;
        padding-right: 24rpx;
        max-width: calc(100vw - 50rpx * 2);
        text-align: center;
        font-size: 30rpx;
        background: #000000;
        opacity: 0.75;
        color: #ffffff;
        border-radius: 16rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        z-index: 5;
      }
      .camera {
        width: 600rpx;
        height: 600rpx;
        border-radius: 50%;
      }
      .mark {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 750rpx;
        height: 100%;
        // background:deeppink;
        background-size: 750rpx 661rpx;
      }
      image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
      }
    }

    .footerV {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .privacyV {
        padding-top: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .text {
          font-size: 30rpx;
          color: #1c1c1c;
          text-align: center;
          line-height: 42rpx;
          margin-left: 15rpx;
          text {
            font-size: 30rpx;
            color: #00aaff;
            text-align: center;
            line-height: 42rpx;
          }
        }
        .icon {
          width: 40rpx;
          height: 47rpx;
          background: green;
          background-size: 100% auto;
        }
      }

      .bottom-tips-2 {
        margin-top: 20rpx;
        color: #999999;
        text-align: center;
        font-size: 26rpx;
      }
      .take-photo-bgV {
        width: 100%;
        margin-top: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .btn-take-photo {
          position: relative;
          border-radius: 50%;
          width: 196rpx;
          height: 196rpx;
          outline: 2px inherit red;
          background: white;
          background-size: 100% auto;
        }
        .btn-take-photo::before {
          content: ""; /* 必须设置内容为空 */
          position: absolute;
          background-color: rgba($color: #000000, $alpha: 0.7);
          top: calc(50% - 45%); /* 将伪元素放置在实际元素内部 */
          left: calc(50% - 45%);
          width: 90%;
          height: 90%;
          z-index: 2; /* 确保伪元素在实际元素下层 */
          border-radius: inherit; /* 继承父元素的圆角属性 */
        }
        .btn-take-photoOuter {
          margin: 0rpx 80rpx 0rpx 80rpx;
          border-radius: 50%;
          padding: 4px;
          background-color: rgba($color: #000000, $alpha: 0.7);
        }
        .btn-change-upload {
          left: 130rpx;
          width: 80rpx;
          height: 80rpx;
          background: blue;
          background-size: 100% auto;
        }
        .btn-change-camera {
          right: 130rpx;
          width: 80rpx;
          height: 80rpx;
          background: red;
          background-size: 100% auto;
        }
      }
      .confirmV {
        margin: 200rpx 100rpx 0rpx 100rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .btn-cancel {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 80rpx;
          width: 40%;
        }
        .btn-ok {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 80rpx;
          width: 40%;
        }
      }
    }
  }
}
</style>